<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css">
  <link rel="stylesheet" href="css/main.css">
  <title>香蕉街-你的剁手街</title>
</head>
<body>
  <div class="top-nav">
    <div class="container clear-float">
      <div class="fl">
        <a href="#">首页</a>
      </div>
      <div class="fr">
        <a class="item" href="#">我的订单</a>
        <a class="item" href="#">收藏夹</a>
        <a class="item" href="#">登陆</a>
        <a class="item" href="#">注册</a>
      </div>
    </div>
  </div>
  <div class="header">
    <div class="container clear-float">
      <div class="logo col-2">
        香蕉街
      </div>
      <div class="col-5 search-bar">
        <input type="text">
        <button>搜索</button>
      </div>
      <div class="col-3 cart">
        <a href="#">我的购物车</a>
      </div>
    </div>
  </div>

  <div class="main-promote clear-float">
    <div class="container">
      <div class="col-2 cat">
        <div class="item">item/item1</div>
        <div class="item">item/item1</div>
        <div class="item">item/item1</div>
        <div class="item">item/item1</div>
        <div class="item">item/item1</div>
        <div class="item">item/item1</div>
        <div class="item">item/item1</div>
        <div class="item">item/item1</div>
        <div class="item">item/item1</div>
        <div class="item">item/item1</div>
        <div class="item">item/item1</div>
      </div>
      <div class="col-6">
        <div class="slider">
          <img src="img/slide_01.png" alt="">
        </div>
        <div class="sub-promote">
          <div class="col-5">
            <img src="img/001.png" alt="">
          </div>
          <div class="col-5">
            <img src="img/002.png" alt="">
          </div>
        </div>
      </div>
      <div class="col-2 info">
        <div class="auth">
          <div class="avatar">
          </div>
          <p>你好，欢迎剁手~</p>
        </div>
        <br/>
        <div class="anno">
          <div class="title">公告</div>
          <div class="content">
            公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容
            公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="cat-promote  clear-float">
      <div class="title">女装</div>
      <div class="content">
        <div class="col-2 item">
          <div class="card"></div>
        </div>
        <div class="col-3 item">
          <div class="card"></div>
        </div>
        <div class="col-2 item">
        <div class="card"></div>
        </div>
        <div class="col-3 item">
          <div class="card"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="cat-promote  clear-float">
      <div class="title">男装</div>
      <div class="content">
        <div class="col-1 item">
          <div class="card"></div>
        </div>
        <div class="col-2 item">
          <div class="card"></div>
        </div>
        <div class="col-3 item">
        <div class="card"></div>
        </div>
        <div class="col-4 item">
          <div class="card"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="cat-promote  clear-float">
      <div class="title">童装</div>
      <div class="content">
        <div class="col-3 item">
          <div class="card"></div>
        </div>
        <div class="col-2 item">
          <div class="card"></div>
        </div>
        <div class="col-3 item">
        <div class="card"></div>
        </div>
        <div class="col-2 item">
          <div class="card"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer  clear-float">
    <div class="container">
      <a href="#">item</a>
      <a href="#">item</a>
      <a href="#">item</a>
      <a href="#">item</a>
      <a href="#">item</a>
      <div>© 2019 GitHub, Inc</idv>
    </div>
  </div>
</body>
</html>